<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: pink;
            /* margin-top: 50px; */
            position: absolute;
        }
    </style>
</head>

<body>

    <div class="box"></div>
    <script>
        //获取到页面元素
        var box = document.querySelector('.box');
        var clientHeight = document.body.clientHeight; // 高度可视区域
        var clientWidth = document.body.clientWidth; // 宽度可视区域
        var boxHeight = box.clientHeight; // 盒子高度
        var boxWidth = box.clientWidth; // 盒子宽度
        var arr = box.clientLeft
        var vertivalHeight = clientHeight / boxHeight;
        var horizonWidth = (clientWidth / boxWidth) / 5;
        var bottomBoundary = clientHeight - boxHeight; // 底部边界值
        var rightBoundary = clientWidth - boxWidth; // 宽度边界值
        var varticalValue = true; //竖直方向,true为正向移动，false为反向运动
        var horizonValue = true; // 横向判断值，true为正向移动，false为反向运动
        var timer = null
        var brr = 0
        box.onclick = (() => {
                brr++
            if (brr % 2){
                timer = setInterval(() => {
                if (box.offsetLeft >= rightBoundary) {
                    console.log(box.offsetLeft - horizonWidth + 'px')
                    horizonValue = false
                } else if (box.offsetLeft <= 0) {
                    console.log(box.offsetLeft + horizonWidth + 'px')
                    horizonValue = true
                }
                // horizonValue && (box.style.left = (box.offsetLeft + horizonWidth) + 'px')
                // !horizonValue && (box.style.left = (box.offsetLeft - horizonWidth) + 'px')  
                if (horizonValue === true) {
                    box.style.left = (box.offsetLeft + horizonWidth) + 'px'
                } else {
                    box.style.left = (box.offsetLeft - horizonWidth) + 'px'
                }
                var currentOffsetTop = box.offsetTop; // 当前竖直方向的位置
                (box.offsetTop >= bottomBoundary) && (varticalValue = false);
                (box.offsetTop <= 0) && (varticalValue = true);
                varticalValue && (box.style.top = (box.offsetTop + vertivalHeight) + 'px')
                !varticalValue && (box.style.top = (box.offsetTop - vertivalHeight) + 'px')
                }, 50)
            }else {
                clearInterval(timer)
            }
        })
    </script>

</body>

</html>